<template>
    <div class="personalbody">
      <br>
      <div>
        <span id="uname_message" class="message">&nbsp;</span>
        <span id="uname_message" class="message">&nbsp;</span>
        <van-icon name="arrow-left" size="6vw" color="#fff" @click="$router.push('/index')" />
        <span class="personaltitle">我的</span>
      </div>
      
      <!-- 头像 -->
      <div class="personalhead">
        <van-image
        round
        fill="contain"
        width="11rem"
        height="11rem"
        :src="`http://localhost:3010/images/${Users[0].portrait}`"
        />
        <van-uploader>
          <div class="circular" >
            <van-icon name="plus" size="20" color="#fff" style="font-weight: 600; margin-top: 12px; margin-left: 12.5px;"/>
          </div>
        </van-uploader>
        <div class="circular-tow">
          <van-icon name="smile-comment-o" size="20" color="#fff" style="font-weight: 600; margin-top: 10px; margin-left: 9.8px;"/>
        </div>
      </div>
      <!-- 内容 -->
      <div class="personalcenter" >
        <span style=" font-size: 1.8em;">{{Users[0].nickname}}</span>
        <br>
        <span style="color:#B7B9BA">full name</span>
        <!-- 分数 -->
        <div class="branch">
          <div class="branchbox">
            <span>{{Users[0].integral}}</span>
            <br>
            <span style="color:#B7B9BA">积分</span>
          </div>
          <span style="color:#B7B9BA;margin: 15px;"> | </span>
          <div class="branchbox" >
            <span>10</span>
            <br>
            <span style="color:#B7B9BA">收藏</span>
          </div>
        </div>
        <!-- 图片 -->
          <van-image
          round
          width="6rem"
          height="6rem"
          fit="cover"
          style="margin:5px; border-radius:7px;"
          
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
           <van-image
          round
          width="6rem"
          height="6rem"
          fit="cover"
          style="margin: 5px;border-radius:7px;"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          @click="$router.push('/answer')"
        />
        <van-image
          round
          width="6rem"
          height="6rem"
          fit="cover"
          style="margin: 5px;border-radius:7px;"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          @click="$router.push('/modify')"
        />
        <div class="imgtitle">
        <span>收藏</span>
        <span>答题</span>
        <span>修改</span>
        </div>
      </div>
      
     
      
    </div>
</template>

<script>
import httpApi from '@/http';

    export default {
        data() {
            return {
              Users:[],
            currentContact: {
                name: '张三',
                tel: '13000000000',
            },
            };
        },
        methods: {
            onEdit() {
                Toast('编辑');
            },
            DetailsUser(){
              httpApi.UserApi.queryDetailsUser({user_id:1}).then((res)=>{
                this.Users=res.data.data
              })
            }
        },
        mounted(){
          this.DetailsUser()
        }
    }
</script>

<style lang="scss" scoped>
.personalbody{
    width: 100vw;
    height: 89vw;
    background-image: url(@/assets/img/personalimg.jpg); 
    .personaltitle{
      margin-left: 35vw ;
      font-weight: 600;
      font-size: 1.2em;
      color: white;
      
    }
    .personalhead{
      margin-top: 45vw;
      margin-left: 25vw;
      position: relative;
      .circular{
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        background-color: #E6A145;
        position: absolute;
        bottom: 10vw;
        right: -3vw;
      }
      .circular-tow{
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        background-color: #E6A145;
        position: absolute;
        bottom: 35vw;
      }
    }
    .personalcenter{
      text-align: center;
      .branch{
         display: flex;
         flex-wrap: nowrap;
         justify-content: center;
        .branchbox{
          margin: 15px;
          font-size: 18px;
          font-weight: 500;
        }
      }
    }
    .imgtitle{
      display: flex;
      justify-content: space-evenly;
      font-size: 18px;
      color: #E6A145;
    }
}
</style>
